<template>
  <div>
    <el-row  style="margin-top: 150px;">
      <el-col :span="8" :offset="8">
        <el-form   label-position="right" :status-icon="true"
                   :inline="false"  :inline-message="false"
                   ref="myform"  :rules="rules" :model="form" label-width="120px">
          <el-form-item >
            <h1 style="text-align: center;">music-后台管理系统</h1>
          </el-form-item>

          <!--rules中的name属性绑定。用name的规则校验数据-->
          <el-form-item label="用户名:"    prop="username">
            <el-input v-model="form.username" clearable></el-input>
          </el-form-item>

          <el-form-item label="密码:"  prop="password">
            <el-input type="password" v-model="form.password" ></el-input>
          </el-form-item>

          <el-form-item label="验证码" prop="code"  >
            <el-input v-model="form.code"  style="width: 60%; float: left" maxlength="5"></el-input>
            <el-image :src="captchaImg" class="captchaImg" @click="getCaptcha"></el-image>
          </el-form-item>

          <el-form-item >
            <el-button :loading="loading" type="primary" @click="onSubmit" style="width: 100%">登录</el-button>
          </el-form-item>

        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import qs from 'qs'
export default {
  // name: 'App',
  methods:{
    myEvent:function(){

    },
    onSubmit:function(){
      let _this = this;
      //找到ref=myform的Vue组件  ..validate调用子组件的验证方法
      //调用子组件的验证方法，获得表单校验结果，结果为真就可以提交表单，否则不能提交表单
      this.$refs.myform.validate((valid,object)=>{
        if (valid) {
          this.loading = true;
          console.log("点击了登录，要提交的表单数据为:",_this.form)
          //做一个简单判断，当用户名为admin,密码为123456时，表示用户名密码正确，跳转到/main页面中
          this.$axios.post('/login?'+ qs.stringify(this.form))
            .then((res)=> {
              console.log(res);
              console.log("后端返回的token: " + res.headers['access_token']);
              localStorage.setItem("access_token",res.headers['access_token'])

              console.log("请求登录信息：" + res.data.data);
              // 获取登录信息
              this.$router.push("/index")

              // this.$axios.get("/MannagerServlet?method=getInfo")
              //   .then((res)=> {
              //     this.$notify({
              //       title: '登录成功',
              //       message: '',
              //       type: 'success'
              //     });
              //     // this.$store.commit('setInfo', res.data.data); // 设置用户信息，再store中存储会丢失，所以存储再session当中，也不对，存储再本地和token一起存在
              //     localStorage.setItem("userInfo",JSON.stringify(res.data.data))
              //     this.$store.commit('setUserInfo', res.data.data); // 存储当前管理员登录的信息
              //     console.log("登录的管理员的信息： ");
              //     console.log(res.data.data);
              //    console.log( this.$store.getters.getUserInfo);
              //     this.loading = false;
              //     _this.$router.push({path:'/index'})//路由跳转,跳转到首页
              //   })
            })
            .catch((err)=> {
              this.loading = false;
            })
        } else {
          console.log('error submit!!');
          console.log(object);//校验未通过的字段。。
          return false;
        }
      });
    },

    // 获取图片验证码
    getCaptcha() {
      this.$axios.get('/captcha').then(res => {
        console.log("/captcha")
        console.log(res)
        console.log(res.data.data.token)
        // console.log(res.data.data.captchaImg)
        this.form.token = res.data.data.token
        this.captchaImg = res.data.data.captchaImg
        // this.form.code = ''
      })
    }

    // onSubmit:function(){
    //   let _this = this;
    //   //找到ref=myform的Vue组件  ..validate调用子组件的验证方法
    //   //调用子组件的验证方法，获得表单校验结果，结果为真就可以提交表单，否则不能提交表单
    //   this.$refs.myform.validate((valid,object)=>{
    //     if (valid) {
    //       this.loading = true;
    //       console.log("点击了登录，要提交的表单数据为:",_this.form)
    //       //做一个简单判断，当用户名为admin,密码为123456时，表示用户名密码正确，跳转到/main页面中
    //       this.$axios.get("/MannagerServlet?method=login", {
    //         params: {
    //           ...this.form
    //         }
    //       })
    //         .then((res)=> {
    //           localStorage.setItem("access_token",res.data.data)

    //           console.log(res.data.data);
    //           // 获取登录信息
    //           this.$axios.get("/MannagerServlet?method=getInfo")
    //             .then((res)=> {
    //               this.$notify({
    //                 title: '登录成功',
    //                 message: '',
    //                 type: 'success'
    //               });
    //               // this.$store.commit('setInfo', res.data.data); // 设置用户信息，再store中存储会丢失，所以存储再session当中，也不对，存储再本地和token一起存在
    //               localStorage.setItem("userInfo",JSON.stringify(res.data.data))
    //               this.$store.commit('setUserInfo', res.data.data); // 存储当前管理员登录的信息
    //               console.log("登录的管理员的信息： ");
    //               console.log(res.data.data);
    //              console.log( this.$store.getters.getUserInfo);
    //               this.loading = false;
    //               _this.$router.push({path:'/index'})//路由跳转,跳转到首页
    //             })
    //         })
    //         .catch((err)=> {
    //           this.loading = false;
    //         })
    //     } else {
    //       console.log('error submit!!');
    //       console.log(object);//校验未通过的字段。。
    //       return false;
    //     }
    //   });
    // }
  },
  data() {
    let _this= this;
    return {
      captchaImg: '', // 验证码图片
      loading: false, // 登录等待
      rules:{//定义校验的规则
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        password:[
          { required: true, message: '密码不能为空', trigger: 'blur' },
        ],
        confirmpassword:[
          //validator: validatePass2, 表示确认密码的校验要调用一个js函数  函数名为validatePass2()
          { required: true,
            validator: function(rule, value, callback){  //value就是验证所绑定的表单元素的值,callback是一个函数，我们需要调用callback（）函数来决定校验是否通过
              console.log(rule);
              console.log(value);
              console.log(callback);
              if (value==''){//提示确认密码不能为空，调用第三个参数callback
                callback(new Error('确认密码不能为空'));
              }else if (_this.form.password!=value){
                callback(new Error('两次输入的密码不一致'));
              }
              //正常情况下就直接调用 callback
              callback();
            }, trigger: 'blur' },
        ],
      },
      form: {
        username: 'admin',
        password: '111111',
        confirmpassword:'',
        code: '',
        token: ''
      }
    }
  },

  /*挂载的时候判断用户是否token有效，有效的话直接跳转到登录页面 --> 路由进来时做了处理*/
  created() {
    // 获取验证码
    this.getCaptcha()
  }
}

</script>

<style scoped>

.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.captchaImg {
  float: right;
  margin-left: 8px;
  border-radius: 4px;
}

</style>
